<html>
<head>
<title>LoginPage.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #a9b7c6;}
.s1 { color: #aa7dfc;}
.s2 { color: #faa23d;}
.s3 { color: #e2da90;}
.s4 { color: #db7e9b;}
.s5 { color: #bbb529;}
.s6 { color: #b3e54c;}
.s7 { color: #52cb54;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
LoginPage.ets</font>
</center></td></tr></table>
<pre><span class="s0">import router from </span><span class="s1">'@ohos.router'</span>
<span class="s0">import </span><span class="s2">{ </span><span class="s0">promptAction </span><span class="s2">} </span><span class="s0">from </span><span class="s1">'@kit.ArkUI'</span>

<span class="s0">AppStorage</span><span class="s3">.</span><span class="s0">setOrCreate</span><span class="s4">(</span><span class="s1">'user'</span><span class="s3">, </span><span class="s2">{ </span><span class="s0">username</span><span class="s3">: </span><span class="s1">''</span><span class="s3">, </span><span class="s0">dateTime</span><span class="s3">: </span><span class="s1">'' </span><span class="s2">}</span><span class="s3">,</span><span class="s4">)</span>

<span class="s0">export interface IUser </span><span class="s2">{</span>
  <span class="s0">username</span><span class="s3">: </span><span class="s0">string</span>
  <span class="s0">dateTime</span><span class="s3">: </span><span class="s0">string</span>
<span class="s2">}</span>

<span class="s5">@</span><span class="s0">Entry</span>
<span class="s5">@</span><span class="s0">Component</span>
<span class="s0">struct LoginPage </span><span class="s2">{</span>
  <span class="s5">@</span><span class="s0">State</span>
  <span class="s0">username</span><span class="s3">: </span><span class="s0">string </span><span class="s3">= </span><span class="s1">''</span>
  <span class="s5">@</span><span class="s0">State</span>
  <span class="s0">password</span><span class="s3">: </span><span class="s0">string </span><span class="s3">= </span><span class="s1">''</span>

  <span class="s5">@</span><span class="s0">Styles</span>
  <span class="s0">inputStyle</span><span class="s4">() </span><span class="s2">{</span>
    <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s2">{ </span><span class="s0">bottom</span><span class="s3">: </span><span class="s6">15 </span><span class="s2">}</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s6">44</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">borderRadius</span><span class="s4">(</span><span class="s6">2</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s4">(</span><span class="s1">'#ffffff'</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">border</span><span class="s4">(</span><span class="s2">{ </span><span class="s0">width</span><span class="s3">: </span><span class="s2">{ </span><span class="s0">bottom</span><span class="s3">: </span><span class="s6">0.5 </span><span class="s2">}</span><span class="s3">, </span><span class="s0">color</span><span class="s3">: </span><span class="s1">'#e4e4e4' </span><span class="s2">}</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s2">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s6">0 </span><span class="s2">}</span><span class="s4">)</span>
  <span class="s2">}</span>

  <span class="s5">@</span><span class="s0">StorageLink</span><span class="s4">(</span><span class="s1">'user'</span><span class="s4">)</span>
  <span class="s0">user</span><span class="s3">: </span><span class="s0">IUser </span><span class="s3">= </span><span class="s2">{} </span><span class="s0">as IUser</span>

  <span class="s0">build</span><span class="s4">() </span><span class="s2">{</span>

    <span class="s0">Scroll</span><span class="s4">() </span><span class="s2">{</span>
      <span class="s0">Flex</span><span class="s4">(</span><span class="s2">{ </span><span class="s0">direction</span><span class="s3">: </span><span class="s0">FlexDirection</span><span class="s3">.</span><span class="s0">Column</span><span class="s3">, </span><span class="s0">alignItems</span><span class="s3">: </span><span class="s0">ItemAlign</span><span class="s3">.</span><span class="s0">Center </span><span class="s2">}</span><span class="s4">) </span><span class="s2">{</span>
        <span class="s0">Column</span><span class="s4">() </span><span class="s2">{</span>
          <span class="s0">Image</span><span class="s4">(</span><span class="s0">$r</span><span class="s4">(</span><span class="s1">'app.media.logo'</span><span class="s4">))</span>
            <span class="s3">.</span><span class="s0">width</span><span class="s4">((</span><span class="s6">120</span><span class="s4">))</span>
            <span class="s3">.</span><span class="s0">height</span><span class="s4">((</span><span class="s6">120</span><span class="s4">))</span>
          <span class="s0">Text</span><span class="s4">(</span><span class="s1">'面试宝典'</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">fontSize</span><span class="s4">((</span><span class="s6">28</span><span class="s4">))</span>
            <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s2">{ </span><span class="s0">bottom</span><span class="s3">: </span><span class="s4">(</span><span class="s6">15</span><span class="s4">) </span><span class="s2">}</span><span class="s4">)</span>
          <span class="s0">Text</span><span class="s4">(</span><span class="s1">'搞定企业面试真题，就用面试宝典'</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">fontSize</span><span class="s4">((</span><span class="s6">14</span><span class="s4">))</span>
            <span class="s3">.</span><span class="s0">fontColor</span><span class="s4">(</span><span class="s1">'#979797'</span><span class="s4">)</span>
        <span class="s2">}</span>
        <span class="s3">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s6">20</span><span class="s4">)</span>

        <span class="s0">Column</span><span class="s4">() </span><span class="s2">{</span>
          <span class="s0">TextInput</span><span class="s4">(</span><span class="s2">{ </span><span class="s0">placeholder</span><span class="s3">: </span><span class="s1">'请输入用户名'</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s0">$$this</span><span class="s3">.</span><span class="s0">username </span><span class="s2">}</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">inputStyle</span><span class="s4">()</span>
            <span class="s3">.</span><span class="s0">placeholderColor</span><span class="s4">(</span><span class="s1">'#C3C3C5'</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">caretColor</span><span class="s4">(</span><span class="s1">'#fa711d'</span><span class="s4">)</span>
          <span class="s0">TextInput</span><span class="s4">(</span><span class="s2">{ </span><span class="s0">placeholder</span><span class="s3">: </span><span class="s1">'请输入密码'</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s0">$$this</span><span class="s3">.</span><span class="s0">password</span><span class="s3">, </span><span class="s2">}</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">type</span><span class="s4">(</span><span class="s0">InputType</span><span class="s3">.</span><span class="s0">Password</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">showPasswordIcon</span><span class="s4">(</span><span class="s0">false</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">inputStyle</span><span class="s4">()</span>
            <span class="s3">.</span><span class="s0">placeholderColor</span><span class="s4">(</span><span class="s1">'#C3C3C5'</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">caretColor</span><span class="s4">(</span><span class="s1">'#fa711d'</span><span class="s4">)</span>

          <span class="s0">Button</span><span class="s4">(</span><span class="s2">{ </span><span class="s0">type</span><span class="s3">: </span><span class="s0">ButtonType</span><span class="s3">.</span><span class="s0">Normal </span><span class="s2">}</span><span class="s4">) </span><span class="s2">{</span>
            <span class="s0">Text</span><span class="s4">(</span><span class="s1">'立即登录'</span><span class="s4">)</span>
              <span class="s3">.</span><span class="s0">fontColor</span><span class="s4">(</span><span class="s1">'#ffffff'</span><span class="s4">)</span>
              <span class="s3">.</span><span class="s0">onClick</span><span class="s4">(() </span><span class="s3">=&gt; </span><span class="s2">{</span>
                <span class="s0">const reg1 </span><span class="s3">= </span><span class="s1">/^[\w-]{4,16}$/</span>
                <span class="s0">const reg2 </span><span class="s3">= </span><span class="s1">/^123456$/</span>
                <span class="s0">if </span><span class="s4">(</span><span class="s3">!</span><span class="s0">reg1</span><span class="s3">.</span><span class="s0">test</span><span class="s4">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">username</span><span class="s3">.</span><span class="s0">trim</span><span class="s4">())) </span><span class="s2">{</span>
                  <span class="s0">promptAction</span><span class="s3">.</span><span class="s0">showToast</span><span class="s4">(</span><span class="s2">{ </span><span class="s0">message</span><span class="s3">: </span><span class="s1">'用户名格式错误' </span><span class="s2">}</span><span class="s4">)</span>
                <span class="s2">} </span><span class="s0">else if </span><span class="s4">(</span><span class="s3">!</span><span class="s0">reg2</span><span class="s3">.</span><span class="s0">test</span><span class="s4">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">password</span><span class="s4">)) </span><span class="s2">{</span>
                  <span class="s0">promptAction</span><span class="s3">.</span><span class="s0">showToast</span><span class="s4">(</span><span class="s2">{ </span><span class="s0">message</span><span class="s3">: </span><span class="s1">'密码输入错误' </span><span class="s2">}</span><span class="s4">)</span>
                <span class="s2">} </span><span class="s0">else </span><span class="s2">{</span>
                  <span class="s0">const date </span><span class="s3">= </span><span class="s0">new Date</span><span class="s4">()</span>
                  <span class="s0">router</span><span class="s3">.</span><span class="s0">pushUrl</span><span class="s4">(</span><span class="s2">{ </span><span class="s0">url</span><span class="s3">: </span><span class="s1">'/pages/MyCenterPage'</span><span class="s3">.</span><span class="s0">slice</span><span class="s4">(</span><span class="s6">1</span><span class="s4">) </span><span class="s2">}</span><span class="s3">, </span><span class="s0">router</span><span class="s3">.</span><span class="s0">RouterMode</span><span class="s3">.</span><span class="s0">Single</span><span class="s4">)</span>
                  <span class="s0">AppStorage</span><span class="s3">.</span><span class="s0">set</span><span class="s4">(</span><span class="s1">'user'</span><span class="s3">, </span><span class="s2">{</span>
                    <span class="s0">username</span><span class="s3">: </span><span class="s0">this</span><span class="s3">.</span><span class="s0">username</span><span class="s3">,</span>
                    <span class="s0">dateTime</span><span class="s3">: </span><span class="s0">this</span><span class="s3">.</span><span class="s0">user</span><span class="s3">.</span><span class="s0">dateTime </span><span class="s3">= </span><span class="s1">`</span><span class="s2">${</span><span class="s0">date</span><span class="s3">.</span><span class="s0">getFullYear</span><span class="s4">()</span><span class="s2">}</span><span class="s1">/</span><span class="s2">${</span><span class="s0">date</span><span class="s3">.</span><span class="s0">getMonth</span><span class="s4">() </span><span class="s3">+ </span><span class="s6">1</span><span class="s2">}</span><span class="s1">/</span><span class="s2">${</span><span class="s0">date</span><span class="s3">.</span><span class="s0">getDate</span><span class="s4">()</span><span class="s2">}</span><span class="s1">`</span>
                  <span class="s2">}</span><span class="s4">)</span>
                  <span class="s0">AlertDialog</span><span class="s3">.</span><span class="s0">show</span><span class="s4">(</span><span class="s2">{ </span><span class="s0">message</span><span class="s3">: </span><span class="s1">'登录成功' </span><span class="s3">+ </span><span class="s0">this</span><span class="s3">.</span><span class="s0">username </span><span class="s2">}</span><span class="s4">)</span>
                <span class="s2">}</span>

              <span class="s2">}</span><span class="s4">)</span>
          <span class="s2">}</span>
          <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s1">'100%'</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s4">(</span><span class="s1">'none'</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">borderRadius</span><span class="s4">((</span><span class="s6">4</span><span class="s4">))</span>
          <span class="s3">.</span><span class="s0">height</span><span class="s4">((</span><span class="s6">44</span><span class="s4">))</span>
          <span class="s3">.</span><span class="s0">linearGradient</span><span class="s4">(</span><span class="s2">{</span>
            <span class="s0">direction</span><span class="s3">: </span><span class="s0">GradientDirection</span><span class="s3">.</span><span class="s0">Right</span><span class="s3">,</span>
            <span class="s0">colors</span><span class="s3">: </span><span class="s4">[[</span><span class="s1">'#fc9c1c'</span><span class="s3">, </span><span class="s6">0</span><span class="s4">]</span><span class="s3">, </span><span class="s4">[</span><span class="s1">'#fa711d'</span><span class="s3">, </span><span class="s6">0</span><span class="s4">]]</span>
          <span class="s2">}</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">stateEffect</span><span class="s4">(</span><span class="s0">false</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">onClick</span><span class="s4">(() </span><span class="s3">=&gt; </span><span class="s2">{</span>
            <span class="s7">// TODO:编写登录逻辑</span>

          <span class="s2">}</span><span class="s4">)</span>
        <span class="s2">}</span>
        <span class="s3">.</span><span class="s0">padding</span><span class="s4">((</span><span class="s6">30</span><span class="s4">))</span>

        <span class="s0">Column</span><span class="s4">() </span><span class="s2">{</span>
          <span class="s0">Text</span><span class="s4">(</span><span class="s1">'其他登录方式'</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">fontSize</span><span class="s4">((</span><span class="s6">14</span><span class="s4">))</span>
            <span class="s3">.</span><span class="s0">fontColor</span><span class="s4">(</span><span class="s1">'#979797'</span><span class="s4">)</span>
        <span class="s2">}</span>
        <span class="s3">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s2">{ </span><span class="s0">top</span><span class="s3">: </span><span class="s4">(</span><span class="s6">70</span><span class="s4">)</span><span class="s3">, </span><span class="s0">bottom</span><span class="s3">: </span><span class="s4">(</span><span class="s6">100</span><span class="s4">) </span><span class="s2">}</span><span class="s4">)</span>
      <span class="s2">}</span>
    <span class="s2">}</span>
  <span class="s2">}</span>
<span class="s2">}</span>
</pre>
</body>
</html>